<template>
	<div class="index-menu-box">
		<transition name="fade">
			<div class="index-menu" v-show="data.isShowMenu">
				<!-- 本地路由菜单 -->
				<el-scrollbar :always="false" :noresize="true">
					<el-menu
						router
						:default-active="data.defaultActive"
						class="el-menu-vertical-demo"
						background-color="#545c64"
						text-color="#fff"
						unique-opened
						active-text-color="#ffffff"
					>
						<template v-for="(item, index) in data.routerList">
							<!-- 没有子路由 -->
							<template v-if="!item.children">
								<el-menu-item :index="item.path" @click="navClick(item)">
									<template #title>
										<span>{{ item.meta.title }}</span>
									</template>
								</el-menu-item>
							</template>
							<!-- 有子路由 -->
							<el-sub-menu v-else :index="item.path">
								<template #title>
									<span>{{ item.meta.title }}</span>
								</template>
								<el-menu-item
									v-for="(itemChildren, indexChildren) in item.children"
									:key="itemChildren.path"
									:index="itemChildren.path"
									@click="navClick(itemChildren)"
								>
									{{ itemChildren.meta.title }}
								</el-menu-item>
							</el-sub-menu>
						</template>
					</el-menu>
				</el-scrollbar>
			</div>
		</transition>
		<!-- 切换图标 -->
		<div class="menuIcon" @click="menuIcon" v-if="data.isBig && data.defaultActive === '/index'">
			<el-icon size="20" color="#414652" v-show="!data.isShowMenu"><Expand /></el-icon>
			<el-icon size="20" color="#414652" v-show="data.isShowMenu"><Fold /></el-icon>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, computed, watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import useStore from '@/store/store.js';
const store = useStore();
const { proxy } = getCurrentInstance();
// console.log('proxy', proxy);

const data = reactive({
	defaultActive: '/index',
	isShowMenu: false, //是否显示菜单
	isBig: false, //是否大屏项目
	routerList: []
});
// 本地路由数据
const router = useRouter();
// console.log('路由信息', router);
let allRoutes = router.options.routes;
let navRoutes = [];
for (let item of allRoutes) {
	if (item.meta && item.meta.isNav) {
		navRoutes = item.children;
		break;
	}
}
data.routerList = navRoutes.filter((item) => {
	if (item.meta.isBig) {
		data.isBig = true;
	}
	return item.meta && item.meta.isMenu; // 过滤菜单
});
// console.log('处理后的路由信息', routerList);
watch(
	() => router.currentRoute.value.path,
	(newValue, oldValue) => {
		data.defaultActive = router.currentRoute.value.path;
		// console.log('当前路由', data.defaultActive);
		if (router.currentRoute.value.path === '/') return;
		if (router.currentRoute.value.meta.isBig) {
			// console.log('大屏项目首页');
			data.isShowMenu = false;
			store.isHeader = false;
		} else {
			// console.log('非大屏项目首页');
			data.isShowMenu = true;
			store.isHeader = true;
		}
	},
	{
		immediate: true
	}
);
// 展开/收缩导航图标
const menuIcon = () => {
	data.isShowMenu = !data.isShowMenu;
};
// 点击菜单
const navClick = (el) => {
	// console.log('点击的菜单', el);
	data.defaultActive = el.path;
	if (data.isBig && el.path === '/index') {
		data.isShowMenu = false;
	}
};
// 处理本地图片路径（如果有图标）
const setImageUrl = computed(() => (image) => {
	return `./src/assets/images/menuIcon${image}`;
});
</script>

<style lang="scss" scoped>
// 左侧导航
.index-menu-box {
	--width: 240px;
	height: 100%;
	position: relative;
	// 切换图标
	.menuIcon {
		position: absolute;
		display: flex;
		right: -25px;
		top: 5px;
		cursor: pointer;
		z-index: 1000;
	}
	// 导航栏
	.index-menu {
		overflow: hidden;
		height: 100%;
		background-color: rgb(84, 92, 100);
		transition: transform 0.5s ease;
		.el-menu {
			box-sizing: border-box;
			border-right: 1px solid rgb(84, 92, 100);
			.el-menu-item:hover {
				background-color: #00000030 !important;
			}
			.el-sub-menu:hover,
			.el-menu--inline .el-sub-menu:hover {
				background-color: #00000030 !important;
			}
			.el-sub-menu__title:hover,
			.el-menu--inline .el-sub-menu:hover {
				background-color: #00000030 !important;
			}
			.active-menu-color {
				background-color: #00000030;
			}
		}
		.el-menu-vertical-demo {
			height: 100%;
		}
		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: var(--width);
		}
		.el-menu-item.is-active {
			background-color: #00000030 !important;
		}
	}
	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.3s ease;
	}
	.fade-enter-from,
	.fade-leave-to {
		width: 0;
	}
	.fade-enter-to,
	.fade-leave-from {
		width: var(--width);
	}
}
</style>
